{% extends "layout.html" %}
{% block content %}

<div class="user-recipes">
  <div class="page-header">
    <h2>My Recipes - {{ recipe_type }}</h2>
  </div>

  <div class="container">
    {% if user_recipes.count() == 0 %}
      <h5>No recipes have been created!</h5>
    {% else %}
      <ul class="media-list">
        {% for recipe in user_recipes %}
          <li class="media">
            <div class="media-left">
              <a class="media-left" href="{{ url_for('recipes.recipe_details', recipe_id=recipe.id) }}">
                <img class="media-object" src="{{ recipe.image_url }}" alt="{{ recipe.image_filename }}" style="width:64;height:64px;">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">
                <a href="{{ url_for('recipes.recipe_details', recipe_id=recipe.id) }}">{{ recipe.recipe_title }}</a>
                {% if recipe.dairy_free_recipe %}
                  <span class="label label-info" style="font-size:10px;">Dairy-Free</span>
                {% endif %}
                {% if recipe.soy_free_recipe %}
                  <span class="label label-success" style="font-size:10px;">Soy-Free</span>
                {% endif %}
              </h4>
              {{ recipe.recipe_description }}
            </div>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>

{% endblock %}
